---
image: https://assets.vercel.com/image/upload/v1630059453/swr/v1.png
description: '약 2년 전에 우리는 사람들이 사랑하는 조그만 데이터 가져오기 React 라이브러리인 SWR을 공개했습니다. 오늘 우리는 SWR 버전 1.0이라는 또 다른 마일스톤에 도달하였습니다.'
date: 2021년 8월 27일
---

import { Callout } from 'nextra-theme-docs'
import { Bleed } from 'nextra-theme-docs'

import Authors, { Author } from 'components/authors'

# SWR 1.0 발표 [#announcing-swr-10]

<Authors date="2021년 8월 27일">
  <Author name="Shu Ding" link="https://twitter.com/shuding_" />
  <Author name="Jiachi Liu" link="https://twitter.com/huozhi" />
</Authors>

약 2년 전에 우리는 사람들이 사랑하는 조그만 데이터 가져오기 React 라이브러리인 SWR을 [오픈 소스로 공개](https://twitter.com/vercel/status/1188911002626097157)했습니다. 오늘 우리는 SWR 버전 1.0이라는 또 다른 마일스톤에 도달하였습니다!

## 새로운 것 [#whats-new]

### 더 작은 크기 [#smaller-size]

[성능](/docs/advanced/performance)은 SWR의 가장 중요한 특징 중 하나입니다. 1.0에서는 **기존 기능 중 어떠한 기능도 제거하지 않으면서** 눈에 띄게 더 작게 만들었습니다.

- 41% 더 작은 코어(gzip시에 24% 더 작음, **3.9 kB**)
- 52% 더 작은 패키지 설치 크기
- 향상된 트리 셰이킹

라이브러리를 가볍게 해야 하는 여러 가지 이유가 있습니다. 여러분의 애플리케이션은 더 작은 번들, 기민한 런타임, 더 작은 `node_modules` 디렉토리를 갖게 됩니다.

또한 패키지 번들링을 개선하여 path 임포트를 지원합니다.

```js
import useSWR from 'swr'
import useSWRInfinite from 'swr/infinite'
```

`useSWRInfinite`을 사용하지 않을 경우, 애플리케이션에 포함되지 않습니다.

### Fallback 데이터 [#fallback-data]

1.0에는 특정 키를 사용하는 SWR hook의 초기 값으로 미리 가져온 데이터를 제공할 수 있는 새로운 `fallback` 옵션이 있습니다.

```jsx
<SWRConfig value={{
  fallback: {
    '/api/user': { name: 'Bob', ... },
    '/api/items': ...,
    ...
  }
}}>
  <App/>
</SWRConfig>
```

SSG, SSR, 테스트를 위한 데이터 목업과 같은 시나리오에서 아주 유용합니다. 자세한 내용은 [Next.js SSG, SSR](/docs/with-nextjs) 문서를 확인하세요.

일관성을 높이고 혼동을 방지하기 위해 이전의 `initialData`를 `fallbackData`로 이름을 변경하였으며 주어진 hook에 대한 단일 fallback 값도 여전히 제공합니다.

### Immutable 모드 [#immutable-mode]

때때로 리소스가 변경되지 않을 경우 이를 **불변**으로 표시하고 싶을 수 있습니다. 이를 위해 재검증은 단 한 번만 하고, 자동 재검증은 비활성화하는 것이 좋습니다. 이제 이를 더 쉽게 해주는 헬퍼 hook이 있습니다.

```jsx
import useSWRImmutable from 'swr/immutable'

// ...

useSWRImmutable(key, fetcher, options)
```

`useSWR` hook과 완전히 동일한 API가 있지만, 탭 포커스나 네트워크 복구 시 재검증을 하지 않습니다. 또한 새로운 옵션인 `revalidateIfStale`을 사용해 동작을 정확하게 제어할 수 있습니다. 더 많은 정보는 [여기](/docs/revalidation#disable-automatic-revalidations)를 참고하세요.

### 커스텀 캐시 제공자 [#custom-cache-provider]

기본값으로 SWR은 단일 전역 캐시를 사용하여 모든 데이터를 저장합니다. 1.0에서는 새로운 `provider` 옵션으로 이를 커스터마이즈 할 수 있습니다.

```jsx
<SWRConfig value={{
  provider: () => myCache
}}>
  <App/>
</SWRConfig>
```

이 새로운 기능으로 많은 강력한 작업들을 수행할 수 있습니다. 여기 몇 가지 예제가 있습니다: [_정규식을 사용하여 여러 키 변경하기_](/docs/advanced/cache#mutate-multiple-keys-from-regex), [_LocalStorage 기반의 영구 캐시_](/docs/advanced/cache#localstorage-based-persistent-cache), [_테스트 간 캐시 초기화_](/docs/advanced/cache#reset-cache-between-test-cases).

새로운 캐시 제공자 API는 React 18의 동시 렌더링과도 더욱 호환됩니다. 캐시 제공자를 추가하는 경우, `useSWRConfig()`에서 반환된 전역 `mutate` 함수를 사용해야 합니다.

더 자세한 내용은 [캐시 제공자](/docs/advanced/cache) 문서를 참고하세요.

### useSWRConfig() [#useswrconfig]

현재 캐시 제공자 및 전역 `mutate` 함수를 포함해 모든 전역 구성을 반환하는 새로운 Hook API입니다.

```jsx
import { useSWRConfig } from 'swr'

function Foo () {
  const { refreshInterval, cache, mutate, ...restConfig } = useSWRConfig()

  // ...
}
```

더 자세한 내용은 [여기](/docs/global-configuration#access-to-global-configurations)를 참고하세요.

### 미들웨어 [#middleware]

SWR 미들웨어는 SWR hook 위에서 추상화를 구축하고 재사용할 수 있는 새로운 방법을 제공합니다.

```jsx
<SWRConfig value={{ use: [...middleware] }}>

// ... or directly in `useSWR`:
useSWR(key, fetcher, { use: [...middleware] })
```

이 기능으로 많은 새로운 아이디어를 구현할 수 있습니다. 몇 가지 예제를 만들어 두었습니다: [_Request Logger_](/docs/middleware#request-logger), [_키가 변경될 때 이전 데이터 유지하기_](/docs/middleware#keep-previous-result), and [_객체 키 직렬화_](/docs/middleware#serialize-object-keys).

더 자세한 내용은 [미들웨어 API](/docs/middleware)를 참고하세요.

### 개선점 및 더 나은 테스트 커버리지 [#improvements-and-better-test-coverage]

0.x 이후로 수백 가지의 작은 개선과 버그 수정을 진행했습니다. SWR은 현재 157개의 테스트를 통해 데이터 가져오기에서 대부분의 에지 케이스들을 다룹니다. 더 자세한 내용은 [Changelog](https://github.com/vercel/swr/releases)를 참고하세요.

### 문서 번역 [#docs-translations]

[컨트리뷰터](https://github.com/vercel/swr-site/graphs/contributors) 및 Nextra의 [i18n 기능](https://nextra.vercel.app/features/i18n) 덕분에, 이제 SWR 문서를 6개의 다른 언어로 제공할 수 있습니다.

- [영어](https://swr.vercel.app)
- [스페인어](https://swr.vercel.app/es-ES)
- [간체 중국어](https://swr.vercel.app/zh-CN)
- [일본어](https://swr.vercel.app/ja)
- [한국어](https://swr.vercel.app/ko)
- [러시아어](https://swr.vercel.app/ru)

## 마이그레이션 가이드 [#migration-guide]

### `useSWRInfinite` 임포트 업데이트 [#update-useswrinfinite-imports]

`useSWRInfinite`는 `swr/infinite`로부터 임포트 해야 합니다.

```diff
- import { useSWRInfinite } from 'swr'
+ import useSWRInfinite from 'swr/infinite'
```

해당하는 타입을 사용하는 경우, 마찬가지로 임포트 경로를 업데이트하세요.

```diff
- import { SWRInfiniteConfiguration, SWRInfiniteResponse } from 'swr'
+ import { SWRInfiniteConfiguration, SWRInfiniteResponse } from 'swr/infinite'
```

### `revalidate`를 `mutate`로 변경 [#change-revalidate-to-mutate]

`useSWR`은 더 이상 `revalidate` 메서드를 반환하지 않습니다. `mutate`로 변경하세요.

```diff
- const { revalidate } = useSWR(key, fetcher, options)
+ const { mutate } = useSWR(key, fetcher, options)


  // ...


- revalidate()
+ mutate()
```

### `initialData`를 `fallbackData`로 이름을 변경 [#rename-initialdata-to-fallbackdata]

```diff
- useSWR(key, fetcher, { initialData: ... })
+ useSWR(key, fetcher, { fallbackData: ... })
```

### 더 이상 기본 Fetcher 없음 [#no-more-default-fetcher]

SWR은 더 이상 기본 fetcher를 제공하지 않습니다(데이터를 JSON으로 파싱 하는 `fetcher` 호출). 가장 쉬운 마이그레이션 방법은 `<SWRConfig>` 컴포넌트를 사용하도록 변경하는 것입니다.

```jsx
<SWRConfig value={{ fetcher: (url) => fetch(url).then(res => res.json()) }}>
  <App/>
</SWRConfig>

// ... or
useSWR(key, (url) => fetch(url).then(res => res.json()))
```

### Hook 반환 `mutate` 사용 권장 [#recommend-to-use-the-hook-returned-mutate]

긴급한 변경 사항은 **아니지만**, 항상 `useSWRConfig` hook으로부터 반환된 `mutate`를 사용할 것을 *권장*합니다.

```diff
- import { mutate } from 'swr'
+ import { useSWRConfig } from 'swr'


  function Foo () {
+   const { mutate } = useSWRConfig()

    return <button onClick={() => mutate('key')}>
      Mutate Key
    </button>
  }
```

캐시 제공자를 사용하지 않을 경우, 현재 전역 임포트 `import { mutate } from 'swr'`는 여전히 동작합니다.

### 이름이 변경된 타입들 [#renamed-types]

TypeScript를 사용하고 있다면, 일관성을 위해 다음 타입명이 변경되었습니다.

| 0.x (deprecated)               | 1.0                        | Note                    |
| ------------------------------ | -------------------------- | ----------------------- |
| `ConfigInterface`              | `SWRConfiguration`         |                         |
| `keyInterface`                 | `Key`                      |                         |
| `responseInterface`            | `SWRResponse`              |                         |
| `RevalidateOptionInterface`    | `RevalidatorOptions`       |                         |
| `revalidateType`               | `Revalidator`              |                         |
| `SWRInfiniteResponseInterface` | `SWRInfiniteResponse`      | moved to `swr/infinite` |
| `SWRInfiniteConfigInterface`   | `SWRInfiniteConfiguration` | moved to `swr/infinite` |

### 베타 및 비공식 기능 사용자 [#beta-and-unofficial-feature-users]

베타 버전의 SWR를 사용하고 있거나 문서화되지 않은 API를 사용하고 있다면, 다음 변경사항을 유의하세요.

- `import { cache } from 'swr'`은 제거되었습니다. 새로운 [`useSWRConfig` API](#useswrconfig)를 사용하세요.
- `import { createCache } from 'swr'`은 제거되었습니다. 새로운 [캐시 제공자 API](/docs/advanced/cache)를 사용하세요.
- `revalidateWhenStale`은 `revalidateIfStale`로 이름이 변경되었습니다.
- `middlewares`는 `use`로 이름이 변경되었습니다.

### 변경 로그 [#changelog]

전체 변경 로그는 [GitHub](https://github.com/vercel/swr/releases)을 참고하세요.

## 향후 계획 [#whats-next]

향후 릴리즈에서도 라이브러리의 안정성을 유지하면서 개선해 나갈 것입니다. 또한 1.0에 이미 추가된 몇 가지 새로운 기능과 개선과 같이 향후 React 버전도 채택할 예정입니다. 또한 React에서 데이터를 가져오는 경험과 라이브러리를 사용하는 경험을 개선하기 위한 새로운 기능도 개발 중입니다.

이 릴리즈에 대한 의견이 있으시면 [알려주세요](https://github.com/vercel/swr/discussions).

## 감사합니다! [#thank-you]

라이브러리에 기여해주신 [Toru Kobayashi](https://twitter.com/koba04), [Yixuan Xu](https://twitter.com/yixuanxu94) 그리고 문서 및 번역에 기여해주신 [Paco Coursey](https://twitter.com/pacocoursey), [uttk](https://github.com/uttk), [Tomohiro SHIOYA](https://github.com/shioyang), [Markoz Peña](https://github.com/markozxuu), [SeulGi Choi](https://github.com/cs09g), [Fang Lu](https://github.com/huzhengen), [Valentin Politov](https://github.com/valentinpolitov)에게 특별한 감사를 표합니다. 이들이 없었다면 이번 릴리즈는 불가능했을 겁니다.

모든 커뮤니티 및 [110명의 기여자](https://github.com/vercel/swr/graphs/contributors)([+ 45명의 문서 기여자](https://github.com/vercel/swr-site/graphs/contributors))분들, 그리고 의견을 주신 모든 분들께도 감사를 표합니다.
